<template>
	<div class="all">
		<div class="title">{{$t("home.contractTemplate")}}</div>
		<div class="content">
			<template v-for="(item,index) in item_list">
				<div :key="index" class="item">
					<div class="left"> {{item.title}} </div><div class="right"><a :href="item.templateUrl">{{$t("home.download")}}</a></div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
import {contractTemplate} from "@/api/authorCenter/writerConsultation"
	export default {
		data() {
			return {
				item_list:null
			}
		},
		methods:{
			getInfo(){
				contractTemplate().then(res=>{
					this.item_list = res.source
				})
			}
		},
		created() {
			
			this.getInfo()
		}
	}
</script>

<style scoped="scoped" lang="scss">
	
	.all{
		box-sizing: border-box;
		padding: 20px;
		display: flex;
		flex-direction: column;
		.title{
			border-bottom: 1px solid #ccc;
			padding:10px 0;
			font-size: 18px;
		}	
		.content{
			flex: 1;
			padding: 40px;
			flex-direction: column;
			.item{
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 20px;
				.left{
					width: 300px;
					padding: 5px 10px;
					text-align: center;
					font-weight: 400;
					color: #999999;
					border:1px solid #ccc;
					margin-right: 20px;
				}
				.right{
					width: 61px;
					height: 24px;
					background: #21D4CF;
					border-radius: 5px;
					padding: 5px 10px;
					text-align: center;
					font-weight: 400;
					color: #FFFFFF;
					border:1px solid #ccc;
					
					a{
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	
</style>
